<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
</head>
<body>
    <h1 id="info">1111</h1>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        new VConsole
        const info = document.querySelector('#info')
        document.querySelector('#info').onclick = function(event){
            console.log(event)
            this.innerHTML = JSON.stringify(event)
        }
        window.addEventListener('deviceorientation', function(event) { 
            console.log('\nalpha:' + event.alpha + '\nbeta:' + event.beta + '\ngamma:' + event.gamma)
            info.innerHTML = '\nalpha:' + event.alpha + '\nbeta:' + event.beta + '\ngamma:' + event.gamma
        }, false)

        if(window.DeviceMotionEvent){
            window.addEventListener('devicemotion', function(event) {
                console.log(event.acceleration.x + ' m/s2');
            });
        }

        wx.ready(function () {
            wx.startDeviceMotionListening({
                interval:100,
                success(){console.log(1)}
            })
            wx.onDeviceMotionChange(function (event){console.log(event)})
            wx.startGyroscope({
                interval:100,
                success(){console.log(1)}
            })
            wx.onGyroscopeChange(function (event){console.log(event)})
        })

    </script>
</body>
</html>